在開發 Angular 應用程式時，會利用 Angular CLI 進行工作空間 (Workspace) 的建立，以及各項元件的開發、測試與佈署。本篇將針對 Angular CLI 的安裝與其指令進行說明，並利用 CLI 來建立一待辦事項的專案，以供未來實作 Angular 觀念之用。

Angular CLI 安裝

安裝 Node.js

在安裝 Angular CLI 前尚需要先安裝 Node.js，可以利用 node --version 來確認是否有安裝，以及所安裝的版本，如下圖，目前我安裝的版本是 13.14.0。

若還沒有安裝時，可以至 Node.js 官網下載。官網上提供了最新版本是 14.8.0，以及長期支援版本是 12.18.3，可以依自己的需求選擇。

長期支援 (Long-Item support, LIS) 版本是一種軟體的產品生命週期，代表不會針對此版本進行新特性 (Feature) 的開發，但會修復程式 Bug 或安全性進行修改。

安裝 Angular CLI

安裝完 Node.js 後，就可以利用 NPM 將 Angular CLI 安裝到電腦裡。在終端機下輸入 npm install --global @angular/cli。

1. 如果要在 mac 上安裝 Angular CLI 需要加入 sudo 來切換至管理員帳戶才有權限夠安裝。
2. NPM (Node Package Manager) 是 Node.js 預設使用的軟體套件管理系統。針對較常用的指令有提供較精簡的縮寫，例如 install 可以縮寫成 i，--global 則為 -g，因此指令就可以用 npm i -g @angular/images。

檢查確認

安裝完 Angular CLI 之後，我們在終端機透過 ng --version 可以查詢 Angular CLI 的版本。

該指令會顯示下列三種資訊：

1. Angular CLI / NodeJs / OS 版本資訊。
2. 已安裝 Angular 套件（依 package.json 檔案內容為主），當 Angular CLI 的版本為 10 時，還會顯示是否為 Ivy 環境。
3. 已安裝的 Angular 開發用的套件與版本資訊。

需要注意的地方，這個指令所顯示的內容，是會依執行指令的路徑是否為 Angular 工作空間而所不同。上圖是在非 Angular 工作空間的路徑下執行，因此所顯示的結果是全域的套件與版本，且在第二部分並沒有顯示資訊。下圖則是在 Angular 工作空間的路徑下執行，結果就顯該方案相關的套件與版本。

另外，也可以利用 npm list -g --detph=0 來檢查透過 NPM 在全域所安裝的套件，因為不需要查詢套件所依賴的其他套件，所以加入 --depth 參數來限制查詢的層級。

Angular CLI 命令

Angular CLI 針對開發 Angular 應用程式的不同階段，提供了各種簡化作業的指令，可以透過 ng help 來查詢 Angular CLI 提供的所有命令。若要知道特定命令的使用方式，則可以利用 ng <command> --help 語法進行查詢。

接下來，依各開發階段所使用的命令進行說明。不過因篇幅的關係，部份的命令會未來的文章有較完整的說明。

Angular 工作空間建立

ng new <名稱> [參數]
-- 或 --
ng n <名稱> [參數]

透過 new 命令，可以在當下目錄建立一個 Angluar 工作空間 (Workspace)，並初始化 Angular 專案所需要的配置，未來也可以修改 angular.json 檔案來變更配置。順帶一提，Angular CLI 對較為常用的命令提供了縮寫，所以也可以利用 ng n <名稱> <參數> 來減少輸入的字元。

工作空間 (Workspace) 是用來放置一個或多個 Angular 專案或函式庫的檔案目錄。

專案初始化

利用此指令建立的工作空間，預設會初始化一個 Angular 應用程式專案，Angular CLI 除了會透過 NPM 安裝必要的套件外，還會利用 Git 進行版本控制，並做第一次的提交 (commit)。利用 --createApplication=false 可以建立一個空的 Angular 工作空間，再依照需求建立應用程式 (application) 或函式庫 (library)。若想要透過如 yarn 等其他套件管理工具來安裝所需的套件，可以利用 --packageManager 參數指定。而參數 --skipInstall=false 、 --skipGit=false 與 --commit=false 則可以取消套件的安裝、Git 版本控制與提交。

頁面與樣式

Angular 以元件 (Component) 來開發單位，封裝了應用程式的頁面、樣式與邏輯，而預設上 Angular 元件會將這三部份拆分至 HTML、CSS 與 TypeScript 三種檔案之內。參數 --inlineTemplate=true 與 --inlineStyle=true 可以讓頁面與樣式都放在 TypeScript 檔案中。另外，Angular 除了支援 CSS 樣式，也可以利用 --style 參數指定 SCSS、SASS、LESS 或 stylus 等樣式檔案格式。在 Angular CLI 的互動模式（--interactive=true）下，若未指定此參數時，Angular CLI 會在執行命令前進行詢問。

路由

當利用 Angular 開發單一頁面應用程式 (Single-Page Application, SPA)，就會使用路由機制來實作頁面之間的切換。利用 --routing=true 參數可以建立路由模組。如同樣式檔格式，在 Angular CLI 的互動模式下，若未指定此參數時，Angular CLI 會在執行命令前進行詢問。

單一頁面應用程式 (Single-Page Application, SPA) 不同於早期網頁程式，整個應用程式只有一個頁面，透過 Ajax 與伺服器溝通並更新部分網頁資料。

測試

Angular 官方建議利用 Jasmine 框架與 Karma 來撰寫與執行元件的測試程式，以驗證元件的正確性，因此在專案建立時會一併安裝相關的測試套件，並在 Angular CLI 建立各項元件時，預設會新增元件測試的規格檔案 (*.spec.ts)。若想改用如 Jest 等其他測試框架，就可以使用 --minimal=true 參數取消安裝預設的測試框架，之後在手動加入所需的測試框架。參數 --skipTests=false 則可以取消 Angular CLI 建立元件時新增測試規格檔。

套件安裝

ng add <套件名稱> [參數]

Angular CLI 6 新增了此命令，當套件有提供 Schematics，就可以大大的簡化了在 Angular 專案設定該套件的方式，例外，若需要在專案加入 Angular Material 套件，只需要執行 ng add @angular/material，就可以取代了手動安裝相關套件、設定 Material Icon 與樣式等步驟。

Schematics 是一種程式碼產生器，可以定義程式的樣版，用來快速產生程式碼；無論在建立專案、新增與更新套件以及建立元件時，都可以依樣版定義來新增與修改程式碼，大大增加開發與更新的速度。

啟動 Angular 應用程式

ng serve <專案名稱> [參數]
-- 或 --
ng s <專案名稱> [參數]

此命令會依照 angular.json 的設定編譯與啟動 Angular 應用程式，並監控專案檔案，以在修改檔案後重新編譯與載入。預設透過瀏覽器訪問 http://localhost:4200 路徑來瀏覽應用程式，可以利用 --host 與 --port 指定訪問的路徑與埠號；另外，透過 --open 可以在執行命令時，自動開啟瀏覽器並訪問應用程式。--watch=false 與 --liveReload=false 兩個參數則是可以取消檔案監控與重新載入應用程式頁面。

元件建立

ng generate <schematic> [參數]
-- 或 --
ng g <schematic> [參數]

此命令可以依 Angular 提供的 Schematics 來建立檔案，此部份在後續文章會針對不同的類型有較為詳細的說明。另外，如同 ng add 命令，只要套件提供了 Schematics 也可以利用此命令來建立所需要的元件。例如，可以利用 ng generate @angular/material:table <component-name> 來建立一個 Angualr Material 資料表元件。

new、add 與 generate 三個命令主要都會新增修改相關的程式檔案，在需要確認命令是否正確的話，可以透過 --dryRun=true 參數來確認命令的執行結果是不是自己所想要的

單元測試

ng test <專案名稱> [參數]
-- 或 --
ng t <專案名稱> [參數]

透過此命令可以執行應用程式中的單元測試檔 (*.spec)，來驗證程式的正確性，也可以產生整個應用程式的測試覆蓋率 (Code Coverage)。

E2E 測試

ng e2e <專案名稱> [參數]
-- 或 --
ng e <專案名稱> [參數]

除了單元測試之外，Angular 也可以透過此命令來執行端對端測試 (End-to-End Testing, E2E Testing)。

程式編譯

ng build <專案名稱> [參數]
-- 或 --
ng b <專案名稱> [參數]

當應用程式開發完後，會使用此命令將應用程式編繹成 ECMAScript，並將結果放在 dist/project_name 目錄下，就可以將其佈署到正式環境上。

程式發佈

ng deploy <專案名稱> [參數]

在 Angular CLI v8.3 加入了此命令，不同於 build 命令將應用程式編譯至輸出目錄，可以利用該此命令將程式編譯並佈署至特定環境下。例外，當開發完的應用程式需要佈署至 Azure 上，就可以加入 @azure/ng-deploy 套件，並執行此命令，就會依 angular.json 的配置將程式佈署到 Azure 上。

Linting

ng lint <專案名稱> [參數]
-- 或 --
ng l <專案名稱> [參數]

在團隊開發，為了避免在一個應用程式中出現各種不同的撰寫聯合國風格，而增加程式維護上的難度。常會在專案中加入如 TsLint 或 ESLint 等工具，來統一程式風格。此命令就是在檢查專案下的程式，是否有依 Lint 的規則進行撰寫。

套件更新

ng update [參數]

當應用程式所相依的元件模組有版本更新時，此命令會依模組所提供的 Schematics 檢查並修改專案程式，針對破壞性變更的特性，就可以減少手動修改程式的機會。例如，Angular Material 在第 10 版時，移除了從 @angular/material 引用按鈕元件；當執行 ng update @angular/material 時，除了升級 Angular Material 版本外，也一併將專案內使用到 @angular/material 的引用改成 @angular/material/button，使得更新元件版本的作業十分方便。

利用 Angular CLI 建立待辦事項專案

接下來，我們利用 ng new todo 來建立未來實作所使用的待辦事項專案。

建立待辦事項專案

由於我們沒有指定參數，Angular CLI 會先詢問此專案樣式格式，以及是否加入路由機制，這兩個設定之後也可以在專案中變更。

啟動 Angular 應用程式

最後，利用 ng serve --open 來啟動專案，當瀏覽器如同下圖開啟了 http://localhost:4200，代表此專案已完成建立。

結論

今天整理了在 Angular CLI 從安裝到開發常使用的指令，並建立了待辦事項專案。下一篇來了解利用 CLI 建立的檔案結構。